@import "../../../style/variables";

page-client-filter {
    $manulife-color: #07a963;
    $font-color: #333;
    $tips-color: #999;
    $gray-color: #e9e9e9;
    $default-color: #666;

    @function computed-vw($px) {
        @return $px/1080*100vw;
    }

    $default-border: computed-vw(1) solid #e9e9e9 !important;

    ion-content {
        .scroll-content {
            background-color: #FCFCFC !important;
            margin-bottom: 0 !important;
        }
        .notice {
            background-color: #fff9f3;
            color: #ffad4c;
            height: computed-vw(112);
            font-size: computed-vw(45);
            vertical-align: middle;
            line-height: computed-vw(112);
            text-align: center;
            width: 100%;
        }
        .iphoneX {
            margin-top: 23px;
        }
        .iphone5s {
            margin-top: 8px;
        }
        .clear-btn {
            font-size: computed-vw(45);
            color: $resetButtonColor;
            background-color: transparent;
            float: right;
            padding: 0;
            margin: 0;
            line-height: computed-vw(54);
        }
        .isClosed {
            max-height: computed-vw(84);
            transition: all .2s ease-in-out;
            .collspan{
                transform: rotate(180deg);
            }
        }
        .isOpen{
            max-height: 9999px;
            transition: all .2s ease-in-out;
        }
        .collspan {
            float: right;
            width: computed-vw(54);
            height: computed-vw(54);
            background-image: url("../assets/images/activity/roster-list/arrow-up.png");
            background-size: 100% 100%;
            transition: all .4s linear;
        }
        div.filterItem {
            padding: computed-vw(60) computed-vw(60) 17.95vw computed-vw(60);
            width: 100%;
            .dateItem-title {
                font-size: computed-vw(54);
                color: #1f212a;
                font-style: normal;
                display: flex;
                padding-bottom: computed-vw(40);
                margin-bottom: computed-vw(40);
                border-bottom: $default-border;
                justify-content: space-between;
                div {
                    line-height: 1;
                }
            }
            .title {
                font-size: computed-vw(54);
                color: #1f212a;
                font-style: normal;
                display: block;
                padding-bottom: computed-vw(40);
                margin-bottom: computed-vw(40);
                border-bottom: $default-border;
            }
            .selfSelect {
                margin-bottom: computed-vw(60);
                overflow: hidden;
                .selectRow.top {
                    padding: 0;
                    border: 0 !important;
                }
                .selectRow.other {
                    border: 0 !important;
                }
                .selectRow {
                    width: 100%;
                    overflow: hidden;
                    span {
                        display: block;
                        height: computed-vw(90);
                        //border: 0.36vw solid #f4f4f4;
                        background-color: #f5f5f5!important;
                        text-align: center;
                        line-height:computed-vw(90);
                        color: #666666;
                        border-radius: computed-vw(10);
                        float: left;
                        font-size: computed-vw(45);
                        width: computed-vw(450);
                        &:nth-of-type(2) {
                            margin-left: 5.5vw;
                        }
                        .error_input {
                            border-color: #da5c56;
                            color: #da5c56;
                        }
                        ion-input {
                            height: 100%;
                            margin: 0;
                            padding: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: computed-vw(10);
                            border: 0.36vw solid #f5f5f5;
                            background-color: #fcfcfc;
                        }
                        input {
                            display: inline-block;
                            width: 100%;
                            text-align: center;
                            box-shadow: none !important;
                            cursor: n-resize;
                            position: relative;
                            z-index: 20;
                            padding: 5px 5vw 5px 1vw;
                        }
                        input::placeholder {
                            color: #666666;
                        }
                    }
                    .word {
                        width: computed-vw(360);
                        position: relative;
                        border: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        i {
                            position: absolute;
                            width: 3vw;
                            font-style: normal;
                            line-height: computed-vw(80);
                            right: computed-vw(-20) - 3vw;
                            color: rgb(153, 153, 153);
                            top: 50%;
                            transform: translateY(-50%);
                        }
                    }
                    .word ~.word {
                        margin-left: 16vw;
                    }
                    .other {
                        width: computed-vw(450);
                        margin-top: computed-vw(24);
                    }
                    .active {
                        background-color: #2db566!important;
                        border: none!important;
                        color: #fff;
                    }
                }
                .selectRow:after {
                    content: '';
                    display: block;
                    overflow: hidden;
                    clear: both;
                }
            }
            .inputNum {
                position: relative;
            }
            .inputNum:before {
                position: absolute;
                content: '';
                display: block;
                width: computed-vw(45);
                border-top: 0.35vw solid #e9e9e9 !important;
                left: 50%;
                transform: translateX(-50%);
                top: 79%;
            }
            div.selfSelect {
                p {
                    float: left;
                    margin: 2.22vw 2.59vw 0 0;
                    height: 6.94vw;
                    width: 25.5vw;
                    //border: 0.55px solid #f5f5f5;
                    background-color: #f5f5f5;
                    text-align: center;
                    line-height: 6.94vw;
                    color: #666666;
                    border-radius: computed-vw(10);
                    font-size: 3.33vw;
                }
                .firstLine {
                    margin-top: 0;
                }
                .active {
                    background-color: $manulife-color!important;
                    border:none!important;
                    color: #fff !important;
                }
            }
            .dateItem {
                margin-bottom: computed-vw(60);
                position: relative;
                div.item {
                    float: left;
                    height: 50%;
                    position: relative;
                    .datetime_error {
                        .datetime-text {
                            border-color: #da5c56;
                            color: #da5c56;
                        }
                    }
                    .error_input {
                        .datetime-text {
                            border-color: #da5c56;
                            color: #da5c56;
                        }
                    }
                    ion-datetime {
                        padding: 0;
                        height: computed-vw(90);
                        width: computed-vw(450);
                        button.item-cover {
                            display: none;
                        }
                        .datetime-text {
                            text-align: center;
                            line-height: computed-vw(90);
                            border: 0.36vw solid #f5f5f5;
                            border-radius: computed-vw(10);
                            color: #666666;
                            font-size: computed-vw(45);
                        }
                    }
                }
                .item:last-of-type {
                    margin-left: 5.5vw;
                }
            }
            .dateItem:after {
                content: '';
                display: block;
                overflow: hidden;
                clear: both;
            }
            .dateItem:before {
                position: absolute;
                content: '';
                display: block;
                width: computed-vw(45);
                border-top: $default-border;
                left: 50%;
                transform: translateX(-50%);
                top: 79%;
            }
        }
        .addMargin {
            margin-bottom: 20vw;
        }
        .row {
            border-bottom: $default-border;
            margin-bottom: computed-vw(60);
            align-items: center;
            font-size: computed-vw(54);
            color: #1f212a;
            font-style: normal;
            .col{
                padding: computed-vw(20) 0;
            }
            ion-toggle {
              float: right;
                height: computed-vw(80);
                width: computed-vw(140);
          }
            .toggle-ios .toggle-icon::before{
                border-radius: computed-vw(40);
                background-color: rgb(215,215,215);
            }
            .toggle-ios .toggle-icon{
                border-radius: 4vw;
                background-color: #D7D7D7;
            }
            .toggle-ios .toggle-inner{
                width: computed-vw(61);
                height: computed-vw(61);
                border-radius: computed-vw(35);
                left: computed-vw(10);
                top: computed-vw(8);
            }
            .toggle-ios.toggle-checked .toggle-inner{
                //transform: translate3d(computed-vw(98),  0,  0);
            }
            .toggle-ios.toggle-checked .toggle-icon{
                background-color: #2db566;
            }
        }
    }
    .fab-ios-light {
        background-color: #fff;
        width: 10vw;
        height: 10vw;
        padding: 0;
        margin: 0 4.6vw;
        .go-up-icon {
            width: 8.89vw;
            height: 8.89vw;
            max-width: none;
        }
    }
    .show {
        animation: show 1000ms forwards linear;
    }
    @keyframes show {
        form {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    ion-footer {
        background-color: #fff;
        .row {
            height: 100%;
            .col {
                padding: 0;
                .button-ios {
                    width: 100%;
                    height: computed-vw(130);
                    margin: 0;
                    box-sizing: border-box;
                    color: #fff;
                    font-size: computed-vw(45);
                    border-radius: 0;
                    border: none;
                }
                .foot-btn_reset {
                    background-color: $resetButtonColor;
                    &:active {
                        background-color: #f37068;
                    }
                }

                .foot-btn_done {
                    background-color: $doneButtonColor;
                    &[disabled] {
                        background-color: #b7b7b7;
                    }
                    &:active:not([disabled]) {
                        background-color: #51c360;
                    }
                }
            }
        }

    }
    .self-btn {
        color: #fff;
        width: 23vw;
        height: 8.88vw !important;
        border-radius: 4vw !important;
        text-align: center;
        line-height: 8.88vw;
        z-index: 20;
        .fab-ios {
            display: none;
        }
    }
    .cancel {
        background-color: #da5c56;
        left: 25vw;
    }
    .cancel.button-ios.activated {
        background-color: #da5c56;
    }
    .confirm {
        background-color: #39b54a;
        right: 25vw;
    }
    .confirm.button-ios.activated {
        background-color: #39b54a;
    }
    .fab-bottom-shadow {
        width: 100vw;
        bottom: 0;
        z-index: 10;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.15));
    }
    .selfInput {
        min-width: 1vw;
        max-width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        margin: 0;
        font-weight: normal;
        font-size: 3.2vw;
        line-height: 6.94vw;
        z-index: 10;
    }
    .test {
        border-right: 0.3vw solid #39b54a;
        animation: test 1200ms infinite ease;
    }
    @keyframes test {
        from {
            border-color: transparent;
        }
        to {
            border-color: #39b54a;
        }
    }

}

ion-backdrop {
    pointer-events: auto;
}
